<template>
  <div class="container">
    <el-table :data="tableData" size="small">
      <el-table-column prop="classIndex" label="课次" width="80" />
      <el-table-column prop="timeRange" label="时段" width="100" />
      <el-table-column prop="classHour" label="课时" width="80" />
      <el-table-column prop="curriculum" label="课程" />
      <el-table-column prop="classHour" label="理论课时" width="80">
        <template #default="scope">
          <el-input v-model="scope.row.theoreticalClassHours" placeholder="请输入理论课时" type="number" />
        </template>
      </el-table-column>
      <el-table-column prop="classHour" label="实训课时" width="80">
        <template #default="scope">
          <el-input v-model="scope.row.practicalTrainingHours" placeholder="请输入实训课时" type="number" />
        </template>
      </el-table-column>
    </el-table>
    <div class="flex justifyCenter justifyEnd actions">
      <el-button type="primary" @click="save" :loading="loading">保存</el-button>
    </div>
  </div>
</template>

<script setup lang="ts">
let props = defineProps(["archivesId"]);
const { proxy } = getCurrentInstance();
let tableData = ref([]);
let loading = ref(false);

onMounted(() => {
  getInfo();
});

function add() {
  tableData.value.push({
    classIndex: tableData.value.length + 1,
    timeRange: "",
    classHour: 2,
    curriculum: "",
  });
}

async function getInfo() {
  tableData.value = await proxy.$apis.scheduleRelevant({
    type: "archives-curriculum-list",
    data: { archivesId: props.archivesId },
  });
}

async function save() {
  try {
    loading.value = true;
    tableData.value.forEach((element) => {
      element.archivesId = props.archivesId;
    });
    await proxy.$apis.scheduleRelevant({
      type: "archives-curriculum-update",
      data: tableData.value,
    });
    proxy.$utils.showToast("保存成功");
    getInfo();
  } catch (error) {
  } finally {
    loading.value = false;
  }
}
</script>



<style lang="scss" scoped>
.container {
  .actions {
    margin-top: 15px;
  }
}
</style>

